<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

  <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 16px; /* 设置默认字体大小 */
            line-height: 1.6; /* 设置默认行高 */
        }
        #reviewListContainer {
            width: 90%; /* 增加表格宽度 */
            margin: 20px auto;
            text-align: center;
        }
        #reviewListTitle {
            background-color: #4CAF50;
            color: white;
            padding: 15px; /* 增加标题的内边距 */
            margin-bottom: 30px; /* 增加标题和表格之间的间距 */
            border-radius: 8px;
            font-size: 24px; /* 增加标题的字体大小 */
        }
        #reviewTable {
            width: 100%;
            border-collapse: collapse;
            margin: auto;
            font-size: 18px; /* 增加表格内容的字体大小 */
        }
        #reviewTable th, #reviewTable td {
            border: 2px solid #ddd; /* 增加表格边框粗细 */
            padding: 15px; /* 增加单元格内边距 */
        }
        #reviewTable th {
            background-color: #f2f2f2;
        }
        .delButton {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px; /* 增加按钮的内边距 */
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px; /* 增加按钮的字体大小 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .delButton:hover {
            background-color: #45a049; /* 悬停时的背景色 */
        }
        
      
       

 
    </style>


</head>
<div id="reviewListContainer">
    <h2 id="reviewListTitle">用户列表</h2>
    <table id="reviewTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>电话</th>
                <th>电子邮件</th>
                <th>服务评价</th>
                <th>教练评价</th>
                <th>留言内容</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 用户数据将动态生成并插入到这里 -->
        </tbody>
    </table>
</div>




</body>

<script>


$(document).ready(function() {
    // 页面加载完成后立即加载用户数据
    reloadreviewData();

});

// 加载用户数据
function reloadreviewData() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/zhengshidazuoye/reviews',
        dataType: 'json',
        success: function(res) {
            renderreviewTable(res); // 渲染用户表格
          
        },
        error: function() {
            alert('Error fetching data.');
        }
    });
}

// 渲染用户表格
function renderreviewTable(reviews) {
    var reviewTableBody = $('#reviewTable tbody');
    reviewTableBody.empty(); // 清空现有内容

    $.each(reviews, function(index, review) {
        var row = $('<tr></tr>');
        row.append('<td>' + review.id + '</td>');
        row.append('<td>' + review.name + '</td>');
        row.append('<td>' + review.phone + '</td>'); // 注意：密码不应该直接显示在表格中
        row.append('<td>' + review.email + '</td>');
        row.append('<td>' + review.serviceRating + '</td>');
        row.append('<td>' + review.coachRating + '</td>');
        row.append('<td>' + review.message + '</td>'); 
        var delButton = $('<button class="delButton">删除</button>'); // 编辑按钮
        delButton.data('reviewId', review.id); // 绑定订单ID到按钮上
        row.append($('<td></td>').append(delButton));
        
        reviewTableBody.append(row);
    });
}





$(document).on('click', '.delButton', function() {
    var reviewId = $(this).data('reviewId'); // 从按钮上获取订单ID
    if (confirm('确定要删除吗？')) {
        // 发送删除请求
        deleteReview(reviewId);

    }
});



function deleteReview(reviewId) {
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/zhengshidazuoye/reviews',
        data: { reviewId: reviewId }, // 将订单ID作为表单参数发送
        success: function(res) {
            // 成功删除后的处理
            reloadreviewData(); // 重新加载订单数据
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error deleting review:', textStatus, errorThrown);
            alert('Error deleting review.');
        }
    });
}



</script>
</html>